<template>
	<view>
		<NavBar text='线上问诊' />
		<view style="width: 100%; height: 63px;"></view>
		<view class="flx2" style="width: 100%; height: 90rpx; background-color: #fff;padding-top: 30rpx;">
			<view :class="{text: true, selectText:ISselect == 0}" @click="ISselect = 0">图文问诊</view>
			<view :class="{text: true, selectText:ISselect == 1}" @click="ISselect = 1" style="margin-left: 20rpx;">视频问诊
			</view>
		</view>
		<view v-if="ISselect == 0">
			<view style="background-color: #fff;padding-top: 10px;margin-bottom: 20px; margin-top: 2rpx;"
				@click="handlecord(item)" v-for="(item,index) in listuser" :key="index">
				<view>
					<view style="display: flex;">
						<view style="margin-left: 15px;margin-top: 15px;margin-bottom: 10px;">
							<view
								style="width: 15px; height: 15px; border-radius: 50%; background-color: red; position: absolute; z-index: 99; left: 60px;">
							</view>
							<image src="@/static/images/u783.png" mode="" style="width: 58px;height: 59px;"></image>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: center; margin-left: 10px;">
							<view style="display: flex;justify-content: space-between;">
								<view style="width:150px; display: flex;justify-content: space-around;">
									<h4>{{item.name}}</h4>
									<span>{{item.sex}}</span>
									<span>{{item.age}}岁</span>
								</view>
								<view :style=" item.status == 0 ? 'margin-left: 50px;font-size: 12px; color:#ff9900;' : 'margin-left: 50px;font-size: 12px; color:#a5a5a5;'">
									{{item.status == 0 ? '待回复' : '已回复'}}
								</view>
							</view>
					
							<view style="margin-top: 10px;">
								<span style="font-size: 12px;color: #0066ff;">{{item.text}}</span>
							</view>
						</view>				
					</view>	
					<view style="font-size: 14px;color: #b7b7b7; text-align: end; width: 88%;">
						<span>{{item.date}}</span>
						<view style="width: 100%; height: 10px;"></view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view style="background-color: #fff;padding-top: 10px;margin-bottom: 20px; margin-top: 2rpx;">
				<view style="display: flex;">
					<view style="margin-left: 15px;margin-top: 15px;margin-bottom: 10px;">
						<view
							style="width: 15px; height: 15px; border-radius: 50%; background-color: red; position: absolute; z-index: 11; left: 60px;">
						</view>
						<image src="@/static/images/u783.png" mode="" style="width: 58px;height: 59px;"></image>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center; margin-left: 10px;">
						<view style="display: flex;justify-content: space-between;">
							<view style="width:150px; display: flex;justify-content: space-around;">
								<h4>李四</h4>
								<span>男</span>
								<span>20岁</span>
							</view>
							<view style="margin-left: 50px;font-size: 12px; color:#ff9900;">
								待回复
							</view>
						</view>

						<view style="margin-top: 10px;">
							<span style="font-size: 12px;color: #0066ff;">脚破了，指甲被掀起来了</span>
						</view>
					</view>
				</view>

				<view style="font-size: 14px;color: #b7b7b7; text-align: end; width: 88%;">
					<span>03-02 14:22</span>
					<view style="width: 100%; height: 10px;"></view>
				</view>
				<view class="flx" style="border-top: #f2f2f2 solid 4rpx;">
					<view class="styletext" @click="yyjy(0)">用药建议</view>
					<view class="styletext" style="border-left: #f2f2f2 solid 2rpx;border-right: #f2f2f2 solid 2rpx"
						@click="yyjy(1)">问诊结果</view>
					<view class="styletext" @click="yyjy(2)">视频问诊</view>
				</view>
			</view>
			<view style="background-color: #fff;padding-top: 10px;margin-bottom: 20px;">
				<view style="display: flex;">
					<view style="margin-left: 15px;margin-top: 15px;margin-bottom: 10px;">
						<view
							style="width: 15px; height: 15px; border-radius: 50%; background-color: red; position: absolute; z-index: 99; left: 60px;">
						</view>
						<image src="@/static/images/u783.png" mode="" style="width: 58px;height: 59px;"></image>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center; margin-left: 10px;">
						<view style="display: flex;justify-content: space-between;">
							<view style="width:150px; display: flex;justify-content: space-around;">
								<h4>张三三</h4>
								<span>女</span>
								<span>32岁</span>
							</view>
							<view style="margin-left: 50px;font-size: 12px; color:#ff9900;">
								待回复
							</view>
						</view>

						<view style="margin-top: 10px;">
							<span style="font-size: 12px;color: #0066ff;">我嗓子疼，目前怀孕32+，可以吃药吗?</span>
						</view>
					</view>
				</view>

				<view style="font-size: 14px;color: #b7b7b7; text-align: end; width: 88%;">
					<span>03-02 14:22</span>
					<view style="width: 100%; height: 10px;"></view>
				</view>
				<view class="flx" style="border-top: #f2f2f2 solid 4rpx;">
					<view class="styletext" @click="yyjy(0)">用药建议</view>
					<view class="styletext" style="border-left: #f2f2f2 solid 2rpx;border-right: #f2f2f2 solid 2rpx"
						@click="yyjy(1)">问诊结果</view>
					<view class="styletext" @click="yyjy(2)">视频问诊</view>
				</view>
			</view>
			<view style="background-color: #fff;padding-top: 10px;margin-bottom: 20px;">
				<view style="display: flex;">
					<view style="margin-left: 15px;margin-top: 15px;margin-bottom: 10px;">
						<image src="@/static/images/u783.png" mode="" style="width: 58px;height: 59px;"></image>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center; margin-left: 10px;">
						<view style="display: flex;justify-content: space-between;">
							<view style="width:150px; display: flex;justify-content: space-around;">
								<h4>赵二</h4>
								<span>男</span>
								<span>45岁</span>
							</view>
							<view style="margin-left: 50px;font-size: 12px; color:#a5a5a5;">
								已回复
							</view>
						</view>

						<view style="margin-top: 10px;">
							<span style="font-size: 12px;color: #0066ff;">起了痘痘，还发烧</span>
						</view>
					</view>
				</view>

				<view style="font-size: 14px;color: #b7b7b7; text-align: end; width: 88%;">
					<span>01-01 10:22</span>
					<view style="width: 100%; height: 10px;"></view>
				</view>
				<view class="flx" style="border-top: #f2f2f2 solid 4rpx;">
					<view class="styletext" @click="yyjy(0)">用药建议</view>
					<view class="styletext" style="border-left: #f2f2f2 solid 2rpx;border-right: #f2f2f2 solid 2rpx"
						@click="yyjy(1)">问诊结果</view>
					<view class="styletext" @click="yyjy(2)">视频问诊</view>
				</view>
			</view>

			<view style="background-color: #fff;padding-top: 10px;margin-bottom: 20px;">
				<view style="display: flex;">
					<view style="margin-left: 15px;margin-top: 15px;margin-bottom: 10px;">
						<image src="@/static/images/u783.png" mode="" style="width: 58px;height: 59px;"></image>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center; margin-left: 10px;">
						<view style="display: flex;justify-content: space-between;">
							<view style="width:150px; display: flex;justify-content: space-around;">
								<h4>李五</h4>
								<span>女</span>
								<span>32岁</span>
							</view>
							<view style="margin-left: 50px;font-size: 12px; color:#a5a5a5;">
								已回复
							</view>
						</view>

						<view style="margin-top: 10px;">
							<span style="font-size: 12px;color: #0066ff;">目前怀孕32+，发烧了，可以吃药吗?</span>
						</view>
					</view>
				</view>

				<view style="font-size: 14px;color: #b7b7b7; text-align: end; width: 88%;">
					<span>04-08 00:28</span>
					<view style="width: 100%; height: 10px;"></view>
				</view>
				<view class="flx" style="border-top: #f2f2f2 solid 4rpx;">
					<view class="styletext" @click="yyjy(0)">用药建议</view>
					<view class="styletext" style="border-left: #f2f2f2 solid 2rpx;border-right: #f2f2f2 solid 2rpx"
						@click="yyjy(1)">问诊结果</view>
					<view class="styletext" @click="yyjy(2)">视频问诊</view>
				</view>
			</view>
			<view style="background-color: #fff;padding-top: 10px;margin-bottom: 20px;">
				<view style="display: flex;">
					<view style="margin-left: 15px;margin-top: 15px;margin-bottom: 10px;">
						<image src="@/static/images/u783.png" mode="" style="width: 58px;height: 59px;"></image>
					</view>
					<view style="display: flex;flex-direction: column;justify-content: center; margin-left: 10px;">
						<view style="display: flex;justify-content: space-between;">
							<view style="width:150px; display: flex;justify-content: space-around;">
								<h4>张李万</h4>
								<span>男</span>
								<span>18岁</span>
							</view>
							<view style="margin-left: 50px;font-size: 12px; color:#a5a5a5;">
								已回复
							</view>
						</view>

						<view style="margin-top: 10px;">
							<span style="font-size: 12px;color: #0066ff;">我今天头昏的不行，老想睡觉</span>
						</view>
					</view>
				</view>

				<view style="font-size: 14px;color: #b7b7b7; text-align: end; width: 88%;">
					<span>03-02 14:22</span>
					<view style="width: 100%; height: 10px;"></view>
				</view>
				<view class="flx" style="border-top: #f2f2f2 solid 4rpx;">
					<view class="styletext" @click="yyjy(0)">用药建议</view>
					<view class="styletext" style="border-left: #f2f2f2 solid 2rpx;border-right: #f2f2f2 solid 2rpx"
						@click="yyjy(1)">问诊结果</view>
					<view class="styletext" @click="yyjy(2)">视频问诊</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				mc: false,
				single: '',
				ISselect: 0,
				listuser: [
					{
						name:'张三三',
						sex:'女',
						age:'23',
						status:0,
						date:'2022-02-03 08:05:05',
						text:'我嗓子疼，目前怀孕32+，可以吃药吗?'
					},
					{
						name:'张三三',
						sex:'女',
						age:'23',
						status:1,
						date:'2022-01-03 08:05:20',
						text:'目前怀孕31+，怎么调理?'
					},
					// {
					// 	name:'赵大',
					// 	sex:'男',
					// 	age:'24',
					// 	status:0,
					// 	date:'2022-02-03 08:05:05',
					// 	text:'我嗓子疼，目前怀孕32+，可以吃药吗?'
					// },
					// {
					// 	name:'钱二',
					// 	sex:'男',
					// 	age:'25',
					// 	status:0,
					// 	date:'2022-02-03 08:05:05',
					// 	text:'我嗓子疼，目前怀孕32+，可以吃药吗?'
					// },
					// {
					// 	name:'孙三',
					// 	sex:'男',
					// 	age:'2',
					// 	status:0,
					// 	date:'2022-02-03 08:05:05',
					// 	text:'我嗓子疼，目前怀孕32+，可以吃药吗?'
					// },
					// {
					// 	name:'李四',
					// 	sex:'男',
					// 	age:'23',
					// 	status:0,
					// 	date:'2022-02-03 08:05:05',
					// 	text:'我嗓子疼，目前怀孕32+，可以吃药吗?'
					// }
				],
				customButtonGroup: [{
						text: '重置',
						backgroundColor: '#ff9900',
						color: '#fff'
					},
					{
						text: '完成',
						backgroundColor: '#ff6600',
						color: '#fff'
					}
				],

			}
		},

		methods: {
			handleClickRight() {
				// 在这里处理右侧图标点击事件的逻辑
				this.mc = true
			},
			falseMc() {
				this.mc = false
			},
			goToback() {
				this.mc = false
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			// gotoagency(){
			// 	uni.navigateTo({ 
			// 		url: '/pages/index/doctor-agency/doctor-agency' ,
			// 		})
			// },
			handlecord(item) {
				
				uni.navigateTo({
					url: '/pages/OnlineConsultation/twwzfainfo?datas='+ JSON.stringify(item),
				})
			},
			back() {
				uni.navigateBack({
					delta: 2
				})
			},
			yyjy(e) {
				if (e == 0) {
					uni.navigateTo({
						url: '/pages/OnlineConsultation/yyqd'
					})
				} else if (e == 1) {
					uni.navigateTo({
						url: '/pages/OnlineConsultation/dzcf'
					})
				} else {
					uni.navigateTo({
						url: '/pages/OnlineConsultation/ltzx'
					})
				}
			}


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
	}

	.Mc {
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;

		.example-body {
			background-color: #fff;
			padding: 10px;
		}
	}


	.text {
		font-size: 30rpx;
		color: #333;
		height: 60rpx;
		width: 150rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.selectText {
		width: 150rpx;
		height: 60rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		background-color: #0099ff;
		color: #fff;
		overflow: hidden;
		box-sizing: border-box;
		text-align: center;
	}

	.styletext {
		text-align: center;
		width: 33%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 25rpx;
	}
</style>